<!--: layout("/layout-main.html", {"title":"套餐管理 - 管理员", "category":"admin"}) { -->
<div class="row">
    <div class="col-md-3">
        <!--: include("/admin/left.html", {"category":"packs"}){} -->
    </div>
    <div class="col-md-9">
        <a id="insert-pack" href="form.html" class="btn btn-primary active" role="button" onclick="return $(this).ajaxLoad();">新建套餐</a>
        <table id="pack-table" class="tablesorter">
            <thead>
                <tr>
                    <th>套餐</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>套餐</th>
                    <th>价格</th>
                </tr>
                <tr>
                    <th colspan="2" class="ts-pager form-horizontal">
                        <button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
                        <button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
                        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
                        <button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
                        <button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
                        <select class="pagesize input-mini" title="Select page size">
                            <option selected="selected" value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                        </select>
                        <!--<select class="pagenum input-mini" title="Select page number"></select>-->
                    </th>
                </tr>
            </tfoot>
            <tbody>
                <!--:for (pack in packList!) {-->
                <tr id="tr-${pack.id}">
                    <td>
                        <a href="item.html?id=${pack.id}" onclick="return $(this).ajaxLoad();">${pack.name}</a><br>
                        CPU：${pack.cpuString!}，内存：${pack.memoryString!}，带宽：${pack.bandwidthString!}<br>
                        映像：${pack.image.name!"无"}<br>
                        创建时间：${pack.createTimeString}
                    </td>
                    <td>${pack.price} 元/月</td>
                </tr>
                <!--:}-->
            </tbody>
        </table>
<!--        <ul class="pagination">
            <li class="disabled"><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>-->


        <script id="js">$(function() {

                $.extend($.tablesorter.themes.bootstrap, {
                    // these classes are added to the table. To see other table classes available,
                    // look here: http://twitter.github.com/bootstrap/base-css.html#tables
                    table: 'table table-bordered',
                    caption: 'caption',
                    header: 'bootstrap-header', // give the header a gradient background
                    footerRow: '',
                    footerCells: '',
                    icons: '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
                    sortNone: 'bootstrap-icon-unsorted',
                    sortAsc: 'icon-chevron-up glyphicon glyphicon-chevron-up', // includes classes for Bootstrap v2 & v3
                    sortDesc: 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes classes for Bootstrap v2 & v3
                    active: '', // applied when column is sorted
                    hover: '', // use custom css here - bootstrap class may not override it
                    filterRow: '', // filter row class
                    even: '', // odd row zebra striping
                    odd: ''  // even row zebra striping
                });

                // call the tablesorter plugin and apply the uitheme widget
                $("#pack-table").tablesorter({
                    // this will apply the bootstrap theme if "uitheme" widget is included
                    // the widgetOptions.uitheme is no longer required to be set
                    theme: "bootstrap",
                    widthFixed: true,
                    sortReset: true,
                    headerTemplate: '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!

                    // widget code contained in the jquery.tablesorter.widgets.js file
                    // use the zebra stripe widget if you plan on hiding any rows (filter widget)
                    widgets: ["uitheme", "zebra"], //"filter", 
                    widgetOptions: {
                        // using the default zebra striping class name, so it actually isn't included in the theme variable above
                        // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
                        zebra: ["even", "odd"],
                        // reset filters button
                        filter_reset: ".reset"

                                // set the uitheme widget to use the bootstrap theme class names
                                // this is no longer required, if theme is set
                                // ,uitheme : "bootstrap"

                    }
                })
                        .tablesorterPager({
                    // target the pager markup - see the HTML block below
                    container: $(".ts-pager"),
                    // target the pager page select dropdown - choose a page
                    cssGoto: ".pagenum",
                    // remove rows from the table to speed up the sort of large tables.
                    // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                    removeRows: false,
                    // output string - default is '{page}/{totalPages}';
                    // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
                    output: '第 {page} 页 ({startRow} - {endRow} / {totalRows})'

                });

            });</script>        
        <!--        
                <script>
        
                        $("#pack-table").tablesorter({
                            theme: 'default',
                            // third click on the header will reset column to default - unsorted
                            sortReset: true,
                            // Resets the sort direction so that clicking on an unsorted column will sort in the sortInitialOrder direction.
                            sortRestart: true,
                            sortInitialOrder: 'desc',
                            headers: {
                                // 0 : { lockedOrder: 'asc' }, only allow sorting in one direction
                                0: {sortInitialOrder: 'asc'}
                            }
        
                        });
        
                </script>-->

    </div>
</div>
<!--: } -->